<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>轻量版网站代码提取器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css" rel="stylesheet">
    <style>body{padding:20px}pre{margin-top:10px}</style>
</head>
<body>
    <div class="container">
        <h1 class="mb-4">网站代码提取器</h1>
        
        <div class="mb-3">
            <label class="form-label">网站URL</label>
            <input type="url" class="form-control" id="url" placeholder="https://example.com">
        </div>
        
        <div class="mb-3">
            <button id="fetchBtn" class="btn btn-primary">提取代码</button>
            <button id="clearBtn" class="btn btn-secondary ms-2">清除</button>
        </div>
        
        <div class="mb-3">
            <ul class="nav nav-tabs" id="myTab">
                <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#html">HTML</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#css">CSS</a></li>
                <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#js">JS</a></li>
            </ul>
            
            <div class="tab-content p-3 border border-top-0 rounded-bottom">
                <div class="tab-pane fade show active" id="html"><pre><code id="html-code" class="language-html"></code></pre></div>
                <div class="tab-pane fade" id="css"><pre><code id="css-code" class="language-css"></code></pre></div>
                <div class="tab-pane fade" id="js"><pre><code id="js-code" class="language-javascript"></code></pre></div>
            </div>
        </div>
    </div>

    <!-- 外部JS资源 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>

    <script>
        // 核心功能代码
        document.getElementById('fetchBtn').addEventListener('click', async () => {
            const url = document.getElementById('url').value;
            if (!url) return alert('请输入URL');
            
            try {
                const response = await fetch(`https://api.codetabs.com/v1/proxy/?quest=${encodeURIComponent(url)}`);
                const html = await response.text();
                
                // 提取HTML
                document.getElementById('html-code').textContent = html;
                
                // 提取CSS
                const cssUrls = Array.from(new DOMParser().parseFromString(html, 'text/html')
                    .querySelectorAll('link[rel="stylesheet"]')).map(link => link.href);
                const css = await Promise.all(cssUrls.map(async url => {
                    const res = await fetch(`https://api.codetabs.com/v1/proxy/?quest=${encodeURIComponent(url)}`);
                    return `/* ${url} */\n${await res.text()}`;
                })).then(results => results.join('\n\n'));
                document.getElementById('css-code').textContent = css;
                
                // 提取JS
                const jsUrls = Array.from(new DOMParser().parseFromString(html, 'text/html')
                    .querySelectorAll('script[src]')).map(script => script.src);
                const js = await Promise.all(jsUrls.map(async url => {
                    const res = await fetch(`https://api.codetabs.com/v1/proxy/?quest=${encodeURIComponent(url)}`);
                    return `/* ${url} */\n${await res.text()}`;
                })).then(results => results.join('\n\n'));
                document.getElementById('js-code').textContent = js;
                
                // 高亮代码
                hljs.highlightAll();
            } catch (error) {
                alert('提取失败: ' + error.message);
            }
        });
        
        document.getElementById('clearBtn').addEventListener('click', () => {
            document.getElementById('url').value = '';
            document.querySelectorAll('code').forEach(el => el.textContent = '');
        });
    </script>
</body>
</html>